<template>
    <div class="uploadImg">
        <el-upload action="/api/upload/img"
                   list-type="picture-card"
                   :headers="headers"
                   :file-list="fileList"
                   :on-preview="handlePictureCardPreview"
                   :on-remove="handleRemove"
                   :on-success="handleSuccess">
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
    name: 'uploadImg',
    data() {
        return {
            headers: {
                token: Cookies.get('token'),
            }
        }
    },
    props: {
        fileList: {
            type: Array,
        },
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        handleSuccess(response, file, fileList) {
            this.$emit('uploadImgSuccess', response.data)
        },
    },
}
</script>

<style>
</style>